<template>
  <div class="container">
      <span style="font-size:20px;font-weight:bold;">修改密码</span>
      <tiny-form
          style="margin-top:20px;"
          label-position="left"
          ref="createData"
          label-width="100px"
      >
        <tiny-form-item label="旧密码">
          <tiny-input clearable type="password" v-model="passwordParam.oldPassword" placeholder="请输入旧密码"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="新密码">
          <tiny-input clearable type="password" v-model="passwordParam.newPassword" placeholder="请输入新密码"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="再次输入密码">
          <tiny-input clearable type="password" v-model="passwordParam.checkPassword" placeholder="请再次输入密码"></tiny-input>
        </tiny-form-item>
        <tiny-form-item>
          <tiny-button type="primary" @click="updatePassword">保存修改</tiny-button>
        </tiny-form-item>
      </tiny-form>
  </div>
</template>

<script setup>
import {
  Form as TinyForm,
  FormItem as TinyFormItem,
  Input as TinyInput,
  Button as TinyButton, Modal,
} from '@opentiny/vue'
import {ref} from 'vue'
import request from "../utils/request.js";
import {userName,tokenName} from "../config/index.js";
import {useRouter} from 'vue-router'



const router = useRouter()
const passwordParam = ref({
  oldPassword:'',
  newPassword:'',
  checkPassword:''
})


// 保存修改
const updatePassword = () => {
  request.put('/api/users/updatePassword',passwordParam.value).then(res => {
    if (res.code === 1){
      Modal.message({message: res.data, status: 'success'})
      // 清除缓存
      localStorage.removeItem(userName)
      localStorage.removeItem(tokenName)
      // 路由到登录界面
      router.push('/login')
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}

</script>

<style lang="less" scoped>
.container {
  width: 30%;
  margin-left: 30px;
}
</style>
